<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%>
<!DOCTYPE html>
<html>
<head>
	<%@include file="../include_new.jsp"%>
</head>
<body id="z_body">
	<div class="panel">
		<div class="panel-heading">
			<i class="icon icon-list"></i> 指挥中心配置
		</div>
		<div class="panel-body">
			<!-- query form -->
			<form id="form_1">
				<div class="row">
					<div class="col-xs-2">
						<div class="input-group">
							<span class="input-group-addon">指挥中心</span>
									<input class="form-control" name="zhzxbh" validType="" type="hidden">
									<input class="form-control app_selector" name="zhzxqmc" 
										data_tree="{type:'zhzx', multi:false, fresh:true, extra:''}">
						</div>
					</div>
					<div class="col-xs-2">
						<div class="input-group">
							<span class="input-group-addon">关键字</span>
							<input class="form-control" name="pzxname" placeholder="配置项"/>
						</div>
					</div>
					
				<!-- buttons -->
				<div style="width:50%; text-align:right;">
					<a class="btn btn-primary" id="btn_query" onclick="getPage()"><i class="icon icon-search"></i> 查询</a>
					<!-- <a class="btn btn-primary" href="form"><i class="icon icon-plus"></i> 新增</a> -->
					<a class="btn btn-primary" data-toggle='modal' data-size='lg' data-iframe="form" data-title="新增指挥中心配置"><i class="icon icon-plus"></i> 新增</a>
				</div>
			</form>
		</div>
	</div>
	
	<div id="app">
		<!-- pager -->
		<ul class="pager" style="margin:-7px 0 5px 0; float:right;">
			<li onclick="firstPage()" class="previous" v-bind:class="pageNum > 1 ? '' : 'disabled'"><a>首页</a></li>
			<li onclick="prevPage()" v-bind:class="pageNum > 1 ? '' : 'disabled'"><a>上页</a></li>
			<li onclick="nextPage()" v-bind:class="pageNum < pages ? '' : 'disabled'"><a>下页</a></li>
			<li onclick="lastPage()" class="next" v-bind:class="pageNum < pages ? '' : 'disabled'"><a>尾页</a></li>
		</ul>
		<span v-show="total != null" style="float:right; padding-right:1em;">第{{pageNum}}/{{pages}}页, 共{{total}}条</span>
		
		<!-- data table -->
		<table class="table table-striped table-hover table-bordered" id="list">
			<tr>
				<th>指挥中心</th>
				<th>指标项</th>
				<th>指标项值</th>
				<th>创建时间</th>
				<th>更新时间</th>
				<th>操作</th>
			</tr>
			<tr v-for="one in list">
				<td>{{one.zhzxqmc}}</td>
				<td>{{one.zbxmc}}</td>
				<td>{{one.zbxz}}</td>
				<td>{{new Date(one.cjsj).format()}}</td>
				<td>{{new Date(one.gxsj).format()}}</td>
				<td>
					<a v-on:click="toUpdate(one.bh)">修改</a>&nbsp;
					<a v-on:click="deleteData(one.bh)">删除</a>
				</td>
			</tr>
		</table>
	</div>
	
	
<script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: {
			pageSize: 10,
			pageNum: 1,
			pages: null,
			list: [],
			total: null
		}
	});

	function getPage() {//分页查询
		tool.query("../zhzxpz/getData?pageSize="+vm.pageSize+"&pageNum="+vm.pageNum, $("#form_1").serialize(), function(data) {
			for(var key in data.data) {
				vm[key] = data.data[key];
			}
		});
	}
	
	function toUpdate(id) {//打开修改页面
		new $.zui.ModalTrigger({
			iframe: "../zhzxpz/form?id="+id,
			size:"lg", title:"修改指挥中心配置项"
		}).show();
	}
	
	$(function() {
		getPage();
	});
	
	function deleteData(id){
		myzui.confirm("是否确认删除?", function(){
			tool.save("../zhzxpz/delete", {id: id}, function() {
				getPage();
			});
		});
	}
</script>

</body>
</html>